<template>
  <div>
    <Header></Header>
    <div class="container layout layout-margin-top">


      <div class="row">
        <div class="col-md-9 layout-body">

          <div class="content">
            <div class="row">

              <div class="col-sm-6" v-for="path in paths" :key="path.id">
                <a :href="'/paths/detail/?pid='+path.id" target="_blank">
                  <div class="path-item">
                    <div class="col-xs-5 col-md-4  path-img">
                      <img :src="path.img">
                    </div>
                    <div class="col-xs-7 col-md-8">
                      <div class="path-name">{{path.title}}</div>
                      <div class="path-course-num"><span>{{path.count_course}}</span> 门课程</div>
                    </div>
                    <div class="desc-layer">
                      <div class="center">
                        {{path.desc}}
                      </div>
                    </div>
                  </div>
                </a>
              </div>

            </div>
          </div>

        </div>
        <div class="col-md-3 layout-side">


          <div class="panel panel-default panel-userinfo">
            <div class="panel-body body-userinfo">
              <div class="media userinfo-header">
                <div class="media-left">
                  <div class="user-avatar">

                    <a class="avatar" href="#sign-modal" data-toggle="modal" data-sign="signin">
                      <img class="circle" src="/static/img/logo-grey.png">
                    </a>

                  </div>
                </div>
                <div class="media-body">

                  <span class="media-heading username">欢迎来到实验楼</span>
                  <p class="vip-remain">做实验，学编程</p>

                </div>
              </div>

              <div class="row userinfo-data">

                <hr>
                <div class="btn-group-lr">
                  <a href="#sign-modal" type="button" class="btn btn-success col-md-5 col-xs-6 login-btn"
                     data-toggle="modal" data-sign="signin">登录</a>
                  <a href="#sign-modal" type="button"
                     class="btn btn-success col-md-5 col-xs-6 col-md-offset-1 register-btn" data-toggle="modal"
                     data-sign="signup">注册</a>
                </div>

              </div>

              <div class="userinfo-footer row">
                <div class="col-md-6 col-xs-6 pos-left">

                  <a href="#sign-modal" data-toggle="modal" data-sign="signin"><span
                    class="glyphicon glyphicon-bookmark"></span> 加入私有课</a>

                </div>
                <div class="col-md-6 col-xs-6 pos-right">
                  <a href="/contribute" target="_blank"><span class="glyphicon glyphicon-send"></span> 我要投稿</a>
                </div>

                <div id="join-private-course" class="modal fade words-ctrl" tabindex="-1" role="dialog">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title">加入私有课</h4>
                      </div>
                      <div class="modal-body">
                        <div style="margin:15px 0;">输入教师提供的私有课程码可以加入教师的私有课程。</div>
                        <form id="private-course-form" method="POST" action="/courses/join">
                          <div class="form-group">
                            <label for="code">邀请码</label>
                            <input class="form-control" id="code" name="code" type="text" value="">
                            <input name="_csrf_token" type=hidden
                                   value="1483786710##0229e038fd44e98fbb3031ffe65d41ef52368b10">
                          </div>
                        </form>

                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary"
                                onclick="document.getElementById('private-course-form').submit();">确定
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div class="sidebox">

            <div class="sidebox-header">
              <h4 class="sidebox-title">最热路径</h4>
            </div>
            <div class="sidebox-body course-content side-list-body">
              <a href="/paths/python"><img style="width:25px;height:25px" src="/static/img/1471513769430.png"> Python
                研发工程师</a>
              <a href="/paths/bigdata"><img style="width:25px;height:25px" src="/static/img/1471513926288.png">
                大数据工程师</a>
              <a href="/paths/cpp"><img style="width:25px;height:25px" src="/static/img/1471513793360.png"> C++
                研发工程师</a>
              <a href="/paths/security"><img style="width:25px;height:25px" src="/static/img/1471513867033.png"> 信息安全工程师</a>
              <a href="/paths/linuxsys"><img style="width:25px;height:25px" src="/static/img/1471514004752.png"> Linux
                运维工程师</a>
            </div>

          </div>

          <div class="side-image side-qrcode">
            <img src="/static/img/ShiyanlouQRCode.png">
            <div class="side-image-text">关注公众号，手机看教程</div>
          </div>

        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from "@/components/Header";
  import Footer from "@/components/Footer";

  export default {
    name: "List",
    components: {Header, Footer},
    data() {
      return {
        paths: [
          // {
          //   "id": 2,
          //   "title": "Python研发工程师",
          //   "desc": "Python研发工程师 83 门课程 Python研发工程师 83 门课程 Python研发工程师 83 门课程 Python研发工程师 83 门课程",
          //   "img": "http://127.0.0.1:8000/media/paths/2.png",
          //   "count_course": 0,
          //   "count_length": 0.0,
          //   "stage_set": []
          // }
        ]
      }
    },
    created() {
      this.get_paths()
    },
    methods: {
      get_paths() {
        this.axios.get('/paths/').then(res => {
          this.paths = res.data
        })
      }
    }

  }
</script>

<style scoped>

</style>
